<template>
	<view class="input_box u-border-bottom">
		<view class="title">{{ label }}</view>
		<view class="value">
			<text class="value_mid">
				<input
					class="input"
					v-model="value"
					:type="type"
					:placeholder="placeholder"
					placeholder-style=""
					placeholder-class="input-placeholder"
					:maxlength="length"
					@input="onInput"
					focus="false"
				/>
			</text>
			<text class="value_unit">{{ unit }}</text>
		</view>
	</view>
</template>

<script>
/**
 * @description 输入框
 * @property {String} label 左边标题文字
 * @property {String} type 中间input输入类型
 * @property {String} placeholder 中间input输入框提示文字
 * @property {String} length 中间input输入框字符限制
 * @property {String} unit 最右边的单位
 * @event {Function} input 输入框内容发生变化时触发
 */
export default {
	name: 'item-input',
	props: {
		label: {
			type: String,
			default: '对公账户经营收入'
		},
		type: {
			type: String,
			default: 'number'
		},
		placeholder: {
			type: String,
			default: '请输入0~5万区间的金额'
		},
		unit: {
			type: String,
			default: '万元/月'
		},
		length: {
			type: String || Number,
			default: '5'
		}
	},
	components: {},
	data() {
		return {
			value: ''
		}
	},
	computed: {},
	watch: {},
	onLoad() {},
	onShow() {},
	onReady() {},
	methods: {
		onInput() {
			if (this.value > 50000) {
				this.value = 50000
			}
			this.$emit('input', this.value)
		}
	},
	onHide() {},
	onUnload() {}
}
</script>
<style scoped lang="scss">
.input_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 24rpx;
	padding-right: 32rpx;
	color: #606266;
	.title {
		font-family: PingFang SC;
		font-weight: 400;
		width: 55%;
	}
	.value {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.value_mid {
			margin-right: 10rpx;
		}
		.value_unit {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
}
.input-placeholder {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
}
.input {
	width: 280rpx;
	text-align: right;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #606266;
	border: none;
	outline: none;
}
</style>
